<!DOCTYPE html>
<html>
<head>
<title>Fig 1.1: Earth-Moon System</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #999;
    background-color: white;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="550" height="450"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Parameters ---
const cx = 275;
const cy = 225;
const earthRadius = 35;
const orbitRadius = 170;
const moonRadius = 5;

// --- Drawing ---
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;

// 1. Earth
ctx.beginPath();
ctx.arc(cx, cy, earthRadius, 0, 2 * Math.PI);
ctx.fillStyle = '#cccccc'; // Light grey fill
ctx.fill();
ctx.lineWidth = 2;
ctx.stroke();

// 2. Moon's orbit
ctx.beginPath();
ctx.setLineDash([8, 8]);
ctx.arc(cx, cy, orbitRadius, 0, 2 * Math.PI);
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.setLineDash([]); // Reset to solid lines

// 3. Moon
const moonAngle = Math.PI; // 180 degrees, exactly to the left
const moonX = cx + orbitRadius * Math.cos(moonAngle);
const moonY = cy + orbitRadius * Math.sin(moonAngle);
ctx.beginPath();
ctx.arc(moonX, moonY, moonRadius, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
ctx.lineWidth = 1; // Reset line width for subsequent lines

// 4. Moon Label
const moonLabelX = moonX - 90;
const moonLabelY = moonY - 25;
ctx.font = '18px sans-serif';
ctx.textAlign = 'left';
ctx.fillStyle = 'black';
ctx.fillText('Moon', moonLabelX, moonLabelY);
// Leader line for Moon
ctx.beginPath();
ctx.moveTo(moonLabelX + 45, moonLabelY + 5);
ctx.lineTo(moonX + moonRadius, moonY);
ctx.stroke();

// 5. Earth Radius R Label
const rLabelAngle = -45 * Math.PI / 180;
const rLineEndX = cx + 95 * Math.cos(rLabelAngle);
const rLineEndY = cy + 95 * Math.sin(rLabelAngle);
// Line from center out to the label
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(rLineEndX, rLineEndY);
ctx.stroke();
// Inward-pointing arrowhead on the surface of the Earth
const rArrowX = cx + earthRadius * Math.cos(rLabelAngle);
const rArrowY = cy + earthRadius * Math.sin(rLabelAngle);
const arrowSize = 10;
ctx.save();
ctx.translate(rArrowX, rArrowY);
ctx.rotate(rLabelAngle + Math.PI); // Point inward
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(-arrowSize, arrowSize / 2.5);
ctx.moveTo(0, 0);
ctx.lineTo(-arrowSize, -arrowSize / 2.5);
ctx.stroke();
ctx.restore();

// Text for "Earth radius R"
ctx.textAlign = 'left';
ctx.font = '18px sans-serif';
ctx.fillText('Earth', rLineEndX + 8, rLineEndY - 8);
ctx.fillText('radius ', rLineEndX + 8, rLineEndY + 12);
const radiusWidth = ctx.measureText('radius ').width;
ctx.font = 'italic 18px sans-serif';
ctx.fillText('R', rLineEndX + 8 + radiusWidth, rLineEndY + 12);

// 6. Orbit Radius nR Label
ctx.font = '18px sans-serif'; // Reset font
const nrLabelAngle = 60 * Math.PI / 180;
const nrLineEndX = cx + orbitRadius * Math.cos(nrLabelAngle);
const nrLineEndY = cy + orbitRadius * Math.sin(nrLabelAngle);
// Line from center to orbit
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(nrLineEndX, nrLineEndY);
ctx.stroke();
// Outward-pointing arrowhead at the end of the line
ctx.save();
ctx.translate(nrLineEndX, nrLineEndY);
ctx.rotate(nrLabelAngle);
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(-arrowSize, arrowSize / 2.5);
ctx.moveTo(0, 0);
ctx.lineTo(-arrowSize, -arrowSize / 2.5);
ctx.stroke();
ctx.restore();

// Text for "nR"
const midX = cx + orbitRadius * 0.55 * Math.cos(nrLabelAngle);
const midY = cy + orbitRadius * 0.55 * Math.sin(nrLabelAngle);
const perpAngle = nrLabelAngle + Math.PI / 2;
const offsetX = 15 * Math.cos(perpAngle);
const offsetY = 15 * Math.sin(perpAngle);
ctx.textAlign = 'center';
ctx.font = 'italic 18px sans-serif';
ctx.fillText('nR', midX + offsetX, midY + offsetY + 5);

// 7. Figure Caption
ctx.font = 'bold 16px sans-serif';
ctx.textAlign = 'center';
ctx.fillStyle = 'black';
ctx.fillText('Fig. 1.1', cx, canvas.height - 20);

</script>
</body>
</html>